<template>
    <div class='layout'>
        <div class="row action-bar">
            <Row>
                <Col span="16">
                    <h2>Manage Group</h2>
                </Col>
                <Col span="8" class="action-bar-flow-right">
                    <Button type="ghost" @click="openModal('create',$event)">
                        <Icon type="plus"></Icon>
                        Add
                    </Button>
                    {{this.$store.getters.role}}
                </Col>
            </Row>
        </div>

        <div class="row">
            <Table :data="groups" :columns="columns" border></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="pager.total" :current="pager.index" @on-change='changePage'></Page>
                </div>
            </div>
        </div>

        <Modal v-model="modalGroup">
            <div slot="header">
                <h3>{{formGroupTitle}}</h3>
            </div>
            <Form ref="formGroup" :model="formGroup" :rules="ruleGroup" :label-width="80">
                <Form-item label="Name" prop="name">
                    <Input v-model="formGroup.name" type="text" placeholder=""></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="confirmGroupFrom('formGroup')" :loading="loading">Create Group</Button>
                <Button type="ghost" @click="cancelGroupFrom('formGroup')" style="margin-left: 8px">Cancel</Button>
            </div>
        </Modal>

    </div>
</template>

<script>
import Icon from 'iview/src/components/icon';
import Button from 'iview/src/components/button';
import GroupAPI from 'api/group';

export default {
    name: 'group',
    data () {
        return {
            role:this.$store.getters.role,
            // table
            columns:[
                { title: 'Name', key: 'name', align: 'left'},
                { title: 'Owner', key: 'owner', align: 'left', width: "200px"},
                { 
                    title: 'Action', align: 'center', width: "250px",
                    render:(h,params)=>{
                        let groupID = params.row.id;
                        return (
                            <div class="table-action-cell">
                                <Button type="primary" size="small" onClick={this.openUpdateModal.bind(this, groupID)}>Update</Button> 
                                <Button type="primary" size="small" onClick={(e)=>this.openUpdateModal(groupID)}>Update2</Button> 
                                <Button type="primary" size="small">Detail</Button> 
                                <Button type="error" size="small">Delete</Button>
                            </div>
                        );
                    }
                }
            ],
            groups:[],
            pager:{ total:0, index:1, size:10},
            // form
            modalGroup: false,
            formGroupTitle:'',
            loading:false,
            formGroup: {
                name: '',
            },
            ruleGroup: {
                name: [
                    { required: true, message: 'this feild is not empty', trigger: 'blur' }
                ],
            }
        }
    },
    created:function(){
        this.getGroups(null);

        // Change The Column Items
        if(this.$store.getters.role == ROLE.GROUP_ADMIN){
            this.columns.forEach((item,index)=>{
                if(item.title=="Owner"){
                    this.columns.splice(index,1);
                }
            })
        }
    },
    methods:{
        changePage(pageIndex){
            this.pager.index = pageIndex;
            this.getGroups(null);
        },
        getGroups(ownerID){
            let params = Object.assign(this.pager, {ownerID})
            GroupAPI.list(params).then(response => {
                this.groups = response.data.data;
                this.pager.total = response.data.count;
            }).catch(error => {
                reject(error);
            });
        },
        openModal(action='update', event){
            // console.log(event.target);
            switch(action){
                case 'create':
                    this.formGroupTitle = 'Create Group';
                    break;
                case 'update':
                    this.formGroupTitle = 'Update Group';
                    break;
            }
            this.modalGroup = true;
        },
        openUpdateModal(id){
            console.log(id);
            this.$Message.info(`The group id is:${id}`);
        },
        confirmGroupFrom(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.resetGroupFromData();
                    // this.$Message.info('点击了确定');
                    this.formGroup.name = '';
                    this.modalGroup = false;
                }
                else {
                    console.log("not ok");
                    // this.$Message.error('!');
                    this.modalGroup = true;
                }
            });
        },
        cancelGroupFrom(name) {
            this.resetGroupFromData();
            this.$refs[name].resetFields();
            this.modalGroup = false;
        },
        resetGroupFromData() {
            this.formGroup.name = '';
        }
  }
}
</script>
